<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h3")
            div(class="flex-column-item flex-center-center under-line") ----菜单设置----
            div(class="flex-column-item flex-row",
            v-for="(item,index) in currentPage",
            :class="{'selected-text': item.name == currentItem.name ? true: false}")
                div(class="flex-row-item",:class="{'flex-3': item.isLast ? false:true}") {{item.name}}
                div(class="flex-row-item right") 
                    span {{item.value.name}}
                    span(v-if="item.attachUnit") {{item.unit}}
        control-select(v-model="currentItem",:visible="visible",ref="selector",v-if="!currentItem.isControlAmount")
        control-amount(v-model="currentItem",:visible="visible",ref="amountControl",v-else)
</template>

<script>
export default {
  data() {
    return {
      items: [
        
        {
          name: "4.堵塞量:",
          value: window.advance.blockAmount,
          options: [
            { name: "极多", value: "极多" },
            { name: "多", value: "多" },
            { name: "极少", value: "极少" },
            { name: "少", value: "少" }
          ],
          attachUnit: true,
          onChange(model) {
            window.advance.blockAmount = model.value;
          }
        },
        {
          name: "5.药物浓度:",
          value: window.advance.medicalStrength,
          options: [
            { name: "U100", value: "U100" },
            { name: "U40", value: "U40" }
          ],
          attachUnit: true,
          onChange(model) {
            window.advance.medicalStrength = model.value;
          }
        },
        {
          isLast: true,
          name: "6.时差:",
          value: window.advance.timeDiff,
          isControlAmount: true,
          max: 9,
          min: -9,
          increment: 1,
          unit: "小时",
          attachUnit: true,
          onChange(model) {
            window.advance.timeDiff = model.value;
          }
        }
      ],
      visible: false,
      currentItem: null,
      currentItemIndex: 0,
      page: { pageIndex: 1, pageSize: 3 }
    };
  },
  computed: {
    currentPage() {
      var currentPage = [0, 1, 2].indexOf(this.currentItemIndex) === -1 ? 2 : 1;
      var start = (currentPage - 1) * this.page.pageSize;
      var end = start + this.page.pageSize;

      return this.items.slice(start, end);
    }
  },
  methods: {
    up() {
      if (this.visible) {
        var ref = this.currentItem.isControlAmount
          ? this.$refs.amountControl
          : this.$refs.selector;
        ref.up();
        return;
      }

      this.currentItemIndex =
        this.currentItemIndex == 0 ? 5 : this.currentItemIndex - 1;
      this.currentItem = this.items[this.currentItemIndex];
    },
    down() {
      if (this.visible) {
        var ref = this.currentItem.isControlAmount
          ? this.$refs.amountControl
          : this.$refs.selector;
        ref.down();
        return;
      }

      //   var index = this.currentItemIndex;

      this.currentItemIndex =
        this.currentItemIndex == 5 ? 0 : this.currentItemIndex + 1;
      this.currentItem = this.items[this.currentItemIndex];
    },

    back() {
      if (this.visible) {
        this.visible = !this.visible;
      } else {
        this.$router.push("/advance-setting?index=2");
      }
    },
    yes() {
      this.visible = !this.visible;
    }
  },
  created() {
    this.currentItem = this.items[0];
  }
};
</script>

<style lang="less">
</style>
